<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage } from 'element-plus';
import { verifyPhone } from '/@/utils/toolsValidate';
import { useLoginApi } from '/@/api/login.js';

// 定义变量内容
const ruleFormRef = ref(null);

const lxsAppData = reactive({
	loading: {
		signIn: false,
	},
	loginData: {
		code: '',
		mobile: '', // 手机号码
		password: '',
		password_form: '',
		captcha: '', // 短信验证码
	},
	captchaForgotData: { // 验证码数据
		btnTip: '获取验证码', // 验证码提示
		time: 60, // 时长
		flag: 0, // 是否点击
	},
	tips: {
		mobile: '', // 手机号码
		password: '',
		password_form: '',
		captcha: '', // 短信验证码
	}
})

const passLight = ref(false); // 密码是否显示
// 点击密码显示隐藏
const passLightClick = () => {
	passLight.value = passLight.value == false;
}

// 切换登录
const loginShow = (param: any) => {
	window.location.reload()
}

// 发送验证码
const sendCaptchaForgot = async () => {

	if (lxsAppData.captchaForgotData.flag == 0) {
		lxsAppData.captchaForgotData.flag = 1;
		let time = lxsAppData.captchaForgotData.time;

		try {
			await useLoginApi().sendCaptchaSubmit({mobile: lxsAppData.loginData.mobile}).then(data => {
				console.log('发送验证码结果', data);
				if (data?.data?.captcha) {
					lxsAppData.loginData.captcha = data?.data?.captcha;
				}
				if (data.code === 200) {
					const m = setInterval(() => {

						lxsAppData.captchaForgotData.btnTip = --time + 'S后重新获取';

						if (time <= 0) {
							clearInterval(m);
							lxsAppData.captchaForgotData.btnTip = '发送验证码';
							lxsAppData.captchaForgotData.flag = 0;
						}
					}, 1000);
				} else {
					ElMessage.error(data.message)

					lxsAppData.captchaForgotData.flag = 0;
				}
			})
		} catch (e) {
			lxsAppData.captchaForgotData.flag = 0;
		}
	}
};

const rules = reactive ({
	mobile: [
		{ required: true, message: '请输入手机号码', trigger: 'blur' },
		{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' },
	],
	captcha: [
		{ required: true, message: '请输入验证码', trigger: 'blur' },
		{ pattern: /^\d{6}$/, message: '验证码必须是6位数' },
	],
	password: [
		{ required: true, message: '请输入新密码', trigger: 'blur' },
		{ pattern: /^[a-zA-Z\d]{6,20}$/, message: '密码必须是6-20位数' },
	],
	password_form: [
		{ required: true, message: '请确认新密码' },
		{ validator: (rule, value, callback) => {
				if (value !== lxsAppData.loginData.password) {
					callback(new Error('两次输入密码不一致'))
				} else {
					callback()
				}
			}, trigger: 'blur' }
	],
})
const submitForm = () => {
	ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			lxsAppData.loading.signIn = true;
			useLoginApi().forgetPasswordSubmit(lxsAppData.loginData).then((data) => {
				if (data.code === 200) {
					ElMessage.success(data.message)
					setTimeout(() => {
						window.location.reload()
					}, 1500)
				} else {
					ElMessage.error(data.message)
				}
				lxsAppData.loading.signIn = false;
				return;
			})
		} else {
			lxsAppData.loading.signIn = false;
			console.log('error submit!!', fields);
			return false;
		}
	})
}
</script>

<template>
	<div class="login-container2">
		<div class="login-simple2">
			<div class="login-header">
				<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E5%AF%86%E7%A0%81.png" alt="">
				<span>找回密码</span>
			</div>

			<div class="fanfic" @click="loginShow(0)">
				<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/xcx/tab/%3C.png" alt="">
			</div>

			<el-form ref="ruleFormRef" :model="lxsAppData.loginData" :rules="rules" label-width="auto" style="max-width: 375px">
				<el-form-item label="手机号码" prop="mobile">
					<el-input v-model="lxsAppData.loginData.mobile" placeholder="请输入手机号码" autocomplete="off" />
				</el-form-item>

				<el-form-item label="验证码" prop="captcha">
					<el-input style="width: 62%;" v-model="lxsAppData.loginData.captcha" placeholder="请输入验证码" autocomplete="off" />
					<div class="verify-text" :class="{'verify-text-active' : lxsAppData.captchaForgotData.flag}" @click="sendCaptchaForgot">{{ lxsAppData.captchaForgotData.btnTip }}</div>
				</el-form-item>

				<el-form-item label="新密码" prop="password">
					<el-input :type="passLight ? 'text' : 'password'" v-model="lxsAppData.loginData.password" placeholder="请输入新密码" autocomplete="off" />

					<img v-if="passLight" class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_alt_light.png" alt="" @click="passLightClick">
					<img v-else class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_hide_light.png" alt="" @click="passLightClick">
				</el-form-item>

				<el-form-item label="确认新密码" prop="password_form">
					<el-input :type="passLight ? 'text' : 'password'" v-model="lxsAppData.loginData.password_form" placeholder="请确认新密码" autocomplete="off" />

					<img v-if="passLight" class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_alt_light.png" alt="" @click="passLightClick">
					<img v-else class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_hide_light.png" alt="" @click="passLightClick">
				</el-form-item>

				<el-form-item>
					<el-button class="login-submit" @click="submitForm" :loading="lxsAppData.loading.signIn">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<style lang="scss">
.el-form-item__label-wrap {
	margin-left: 0 !important;
}
@media screen and (max-width: 1000px)  and (min-width: 501px) {
	.login-simple2 {
		width: 90% !important;
		height: 100vh !important;
		margin: 0 auto;
		background: linear-gradient(to bottom, #fff1f0, #ffe1d3, #ffd4b3) !important;
	}
}

@media screen and (max-width: 500px) {
	.login-simple2 {
		width: 100% !important;
		height: 100vh !important;
		margin: 0 auto;
		background: linear-gradient(to bottom, #fff1f0, #ffe1d3, #ffd4b3) !important;
	}
}

/* 忘记密码 */
.login-container2 {
	display: grid;
	place-items: center; /* 垂直和水平居中的简写 */
	height: 100vh;
	background: #F2F4F7;

	.login-simple2 {
		width: 1000px;
		height: 600px;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px rgba(190,190,190,0.25);
		border-radius: 5px 5px 5px 5px;
		position: relative;

		.login-header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30px;
			img {
				width: 20px;
				height: 20px;
				margin-right: 3px;
			}
			span {
				font-size: 16px;
				color: #222222;
				text-indent: 3px;
			}
		}

		.fanfic {
			width: 24px;
			height: 24px;
			position: absolute;
			left: 20px;
			top: 20px;
			cursor: pointer;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.el-form {
			margin: 60px auto 0;

			.el-form-item {
				height: 44px;
				align-items: center;
			}
			.el-form-item__label {
				height: 44px;
				font-size: 14px;
				color: #666666;
				line-height: 44px;
			}
			.el-form-item__content {
				justify-content: space-between !important;

				.el-input {

					.el-input__wrapper {
						box-shadow: none !important;

						.el-input__inner {
							height: 44px;
							font-size: 14px;
							color: #000000;
							border-bottom: 1px solid #ECECEC;
							position: relative;
						}

						.el-input__inner:focus {
							border-bottom: 1px solid #FC661C;
						}
					}
				}

				.pass-light {
					width: 24px;
					height: 24px;
					position: absolute;
					right: 14px;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.verify-text {
				width: 108px;
				height: 40px;
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #FC661C;
				color: #FC661C;
				line-height: 40px;
				text-align: center;
				transition: all 0.2s ease;
				cursor: pointer;
			}
			.verify-text:active {
				background: #FC661C;
			}
			.verify-text-active {
				background-color: #999999;
				border: none !important;
				color: #FFFFFF;
			}

			.login-submit {
				margin-top: 52px;
				border: none !important;
				width: 387px;
				height: 48px;
				background: #FC661C;
				border-radius: 5px 5px 5px 5px;
				box-shadow: 0px 2px 10px 0px rgba(190,190,190,0.25);
				border-radius: 5px 5px 5px 5px;
				font-size: 16px;
				color: rgba(255,255,255,0.5);
				line-height: 48px;
				cursor: pointer;
				text-align: center;
			}
		}
	}
}
</style>